<template>
	<div class="TickeCompletion-common-layout">
		<el-container>
			<el-header class="TickeCompletion-Header">
				<div class="TickeCompletion-Header-1">工单完成度统计</div>
			</el-header>
			<el-main class="TickeCompletion-Main">
				<div ref="main" style="width: 100%; height: 400px;"></div>
			</el-main>
		</el-container>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import * as echarts from 'echarts';
	import $http from '../router/AxiosApi';

	const cs = ref([new Date("2024-07-01"), new Date("2024-07-07")]);
	const main = ref<HTMLElement | null>(null);

	onMounted(() => {
		if (main.value) {
			const myChart = echarts.init(main.value);

			$http.post("findOrderNum1").then((res) => {
				const data = res.data;
				const completed = [];
				const incomplete = [];
				const categories = ['住户投诉', '住户报修']; // 可调整

				data.forEach((item : any) => {
					if (item.typeName === '住户投诉') {
						if (item.state === '已完成') {
							completed[0] = item.count;
						} else {
							incomplete[0] = item.count;
						}
					} else if (item.typeName === '住户报修') {
						if (item.state === '已完成') {
							completed[1] = item.count;
						} else {
							incomplete[1] = item.count;
						}
					}
				});

				const seriesData = ['已完成', '未完成'].map((name, index) => ({
					name,
					type: 'bar',
					stack: 'total',
					barWidth: '10%',
					label: {
						show: true,
						formatter: (params) => {
							// 确保 params.value 是数字
							const value = Number(params.value);
							return !isNaN(value) ? value.toFixed(0) : 'N/A';
						}
					},
					itemStyle: {
						color: index === 0 ? '#00C36D' : '#E5F9F0'
					},
					data: index === 0 ? completed : incomplete
				}));

				const option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: { type: 'shadow' },
						formatter: (params) => {
							let tooltipContent = params[0].name + '<br/>';
							params.forEach((item) => {
								const value = Number(item.value);
								tooltipContent += item.marker + ' ' + item.seriesName + ': ' + (isNaN(value) ? 'N/A' : value.toFixed(0)) + '个工单<br/>';
							});
							const dataIndex = params[0].dataIndex;
							const total = completed[dataIndex] + incomplete[dataIndex];
							const completionRate = (completed[dataIndex] / total * 100).toFixed(2);
							const incompleteRate = (incomplete[dataIndex] / total * 100).toFixed(2);
							tooltipContent += '完成率: ' + completionRate + '%<br/>';
							tooltipContent += '未完成率: ' + incompleteRate + '%<br/>';
							return tooltipContent;
						}
					},
					legend: { selectedMode: false },
					grid: { left: 100, right: 100, top: 50, bottom: 50 },
					yAxis: {
						type: 'value',
						axisLabel: { formatter: (value) => Math.floor(value / 5) * 5 }
					},
					xAxis: {
						type: 'category',
						data: categories
					},
					series: seriesData
				};

				myChart.setOption(option);
			});
		}
	});
</script>


<style scoped>
	.TickeCompletion-common-layout {
		width: 1390px;
		background-color: white;
		border-radius: 10px;
		margin-top: 20px;
		margin-left: 10px;
	}

	.TickeCompletion-Header {
		display: flex;
		justify-content: space-between;
		/* 左右对齐，中间自动间隔 */
		align-items: center;
		/* 垂直居中对齐 */
	}

	.TickeCompletion-Header-1 {
		font-weight: bold;
	}
</style>